<template>
  <div>
    <fixedheader title="收货地址" ref="header"></fixedheader>
    <div class="addAddress" ref="addAddress">
      <div class="add-address-wrap">
        <ul>
          <li class="border-1px">
            <p>
              <span class="title">收货人：</span>
              <input type="text" v-model="user.name" placeholder="姓名" autofocus required>
            </p>
          </li>
          <li class="border-1px">
            <p>
              <span class="title">联系方式：</span>
              <input type="text" v-model="user.mobile" placeholder="手机号码" maxlength="11" required>
            </p>
          </li>
          <li class="border-1px">
            <p>
              <span class="title">选择国家：</span>
              <select class="country" v-model="user.country" placeholder="选择国家" required @change="changeCountry">
                <option value="中国">中国</option>
                <option value="国外">国外</option>
              </select>
            </p>
          </li>
          <li class="border-1px" v-show="!noCity">
            <p class="more">
              <span class="title">所在地区：</span>
              <div class="text-control" v-if="city" @click.stop.prevent="openCityChoose">{{city}}</div>
              <div class="text-control tips" v-else @click.stop.prevent="openCityChoose">选择所在地区</div>
            </p>
          </li>
          <li>
            <p class="pr">
              <span class="title special">详细地址：</span>
              <textarea v-model="user.address" placeholder="详细地址需填写楼栋楼层或房间号" rows="3" required></textarea>
              <i class="icon-close" v-show="clearAddress" @click.stop.prevent="doClearAddr"></i>
            </p>
          </li>
          <input type="hidden" v-model="user.default" value="false">
        </ul>
        <div class="btns btn-green" @click.stop.prevent="addAddress"><span>确认</span></div>
      </div>
    </div>
    <citychoose ref="city" @selectCity="cityChosed"></citychoose>
  </div>
</template>

<script type="text/ecmascript-6">
  import fixedheader from '@/components/fixedtoolbar/fixedheader';
  import citychoose from '@/components/my/citychoose';
  import api from '@/api/api';

  const RESPONSE_OK = 0;

  export default {
    data() {
      return {
        user: {
          name: '',
          mobile: '',
          address: '',
          country: '中国',
          default: false
        },
        city: '',
        noCity: false
      };
    },
    computed: {
      clearAddress() {
        if (this.user.address.length) {
          return true;
        }
        return false;
      }
    },
    activated() {
      this.show();
    },
    deactivated() {
      this.hide();
      this.noCity = false;
    },
    methods: {
      addAddress() {
        if (!this.user.mobile || !this.user.address) {
          return;
        }
        this.user.userId = this.$store.getters.getUserInfo.userId;
        this.user.city = this.city;
        if (!this.user.userId) {
          this.$store.dispatch('addAddress', this.user);
          this._reset();
          this.$router.back();
          return;
        }
        api.addAddress(this.user).then(response => {
          if (response.result === RESPONSE_OK) {
            this.$store.dispatch('addAddress', this.user);
            this._reset();
            this.$router.back();
          }
        });
      },
      openCityChoose() {
        this.$refs.city.choseAdd();
      },
      changeCountry() {
        if (this.user.country === '国外') {
          this.noCity = true;
        } else {
          this.noCity = false;
        }
      },
      cityChosed(city) {
        if (city && city.city) {
          this.city = city.province + city.city + (city.district || '');
        }
      },
      _reset() {
        this.user = {
          name: '',
          mobile: '',
          address: '',
          country: '中国',
          default: false
        };
      },
      doClearAddr() {
        this.user.address = '';
      },
      show() {
        this.$store.commit('HIDE_FOOTER');
      },
      hide() {
        this.$store.commit('SHOW_FOOTER');
      }
    },
    components: {
      fixedheader, citychoose
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '../../common/stylus/mixin';
  .addAddress
    position: absolute
    left: 0
    top: 44px
    bottom: 0
    width: 100%
    overflow: hidden
  .add-address-wrap
    position: relative
    background: #fff
    padding: 0 10px 40px
    ul
      position: relative
      li
        position: relative
        padding: 8px 0 0 72px
        box-sizing: border-box
        &.border-1px
          padding: 8px 0 8px 72px
          border-1px(rgba(7, 17, 27, 0.1))
        .text-control
          height: 20px
          line-height: normal
          border: 0 none
          font-size: 14px
          width: 100%
          vertical-align: top
          &.tips
            color: #BBBBBB
        p
          display: block
          box-sizing: border-box
          &.pr
            padding-right: 2px
          .title
            position: absolute
            display: block
            width: 70px
            top: 11px
            left: 0
            right: 0
            margin: auto 0
            padding-right: 20px
            text-align: right
            font-size: 14px
            line-height: 1
            &.special
              top: 16px
          input, select
            height: 20px
            line-height: normal
            border: 0 none
            font-size: 14px
            width: 100%
            vertical-align: top
          textarea
            width: 100%
            border: 1px dashed #ccc
            resize: none
            font-size: 14px
            line-height: 1.5
            padding-right: 20px
            box-sizing: border-box
          .icon-close
            position: absolute
            top: 13px
            right: 7px
            font-size: 18px
          &.more:after
            position: absolute
            display: block
            width: 10px
            height: 10px
            content: ""
            border-top: 1px solid #666
            border-left: 1px solid #666
            -webkit-transform-origin: 50%
            transform-origin: 50%
            -webkit-transform: rotate(135deg)
            transform: rotate(135deg)
            top: 50%
            right: 5px
            margin-top: -4px
</style>
